<template>
    <div class="governmentWRAP">
        <div class="swiper-box">
            <div class="uni-margin-wrap">
                <swiper
                    class="swiper"
                    circular
                    :indicator-dots="indicatorDots"
                    :autoplay="autoplay"
                    :interval="interval"
                    :duration="duration"
                >
                    <swiper-item>
                        <!-- <view class="swiper-item uni-bg-red">A</view> -->
                        <image
                            class="swiper-item"
                            src="https://img0.baidu.com/it/u=2040291506,4127484861&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"
                            mode="scaleToFill"
                        />
                    </swiper-item>
                    <swiper-item>
                        <!-- <view class="swiper-item uni-bg-red">A</view> -->
                        <image
                            class="swiper-item"
                            src="https://img0.baidu.com/it/u=252461469,563202494&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500"
                            mode="scaleToFill"
                        />
                    </swiper-item>
                </swiper>
            </div>
        </div>
        <div class="main-wrap">
            <div class="box-card" @click="handleToDetails">
                <image
                    class="img-box"
                    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F06656e96-bcce-4b23-af86-2d28e5008a2c%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1704334558&t=538315b0c1bb5572b8c75d2d268b0811"
                    mode="scaleToFill"
                />
                <div class="unit-nickname-wrap">
                    <div>单位名称</div>
                    <div class="nick-message">单位简介简介</div>
                    <span class="addrss">地址:成都市武侯区保利中心</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const indicatorDots = ref<Boolean>(true)
const autoplay = ref<Boolean>(true)
const interval = ref<Number>(2000)
const duration = ref<Number>(500)
const handleToDetails = () => {
    uni.navigateTo({
        url: '/mainPages/governmentDetails/index'
    })
}
</script>
<style scoped lang="scss">
.governmentWRAP {
    width: 100%;
    min-height: 100vh;
    background-color: #eee;
    .swiper-box {
        width: 100%;
        height: 120px;
    }
    .uni-margin-wrap {
        width: 100%;
        width: 100%;
    }
    .swiper {
        height: 120px;
    }
    .swiper-item {
        display: block;
        width: 100%;
        height: 300rpx;
        line-height: 300rpx;
        text-align: center;
    }
    .main-wrap {
        margin-top: 10px;
        padding-left: 5px;
        padding-right: 5px;
        box-sizing: border-box;

        .box-card {
            // height: 180px;
            width: 100%;
            background: #fff;
            border-radius: 10px;
            padding-bottom: 8px;
            box-sizing: border-box;
            .img-box {
                border-radius: 10px 10px 0px 0px;
                width: 100%;
                height: 120px;
            }
        }
        .unit-nickname-wrap {
            padding-left: 10px;
            padding-right: 10px;
            box-sizing: border-box;
            .nick-message {
                font-size: 12px;
            }
            .addrss {
                font-size: 12px;
                color: #ccc;
            }
        }
    }
}
</style>
